<template>
  <div class="main">
    <div class="help">
        <div class="content">
            <a href="#" class="paTitle">帮助中心</a>
            <ul class="tab">
                <li v-for="item in tab"><a :href="item.link">{{ item.title }}</a></li>
            </ul>
            <ul class="list">
                <li v-for="(item,index) in help">
                    <a :href="item.link">{{ item.title }}</a>
                    <p>{{ item.date }}</p>
                    <span>{{ item.desc }}</span>
                </li>
            </ul>
        </div>
        <div class="page">
            <a href="javascript:;" @click="prev">上一页</a>
            <div class="select">
                <div class="val">{{ pageNum }}</div>
                <select v-model="pageNum">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
            <a href="javascript:;" @click="next">下一页</a>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
	data (){
		return {
            pageNum: 1,
            tab:[
                {
                    link: '#/list_article?list=help&id=1',
                    title: '购物指南'
                },
                {
                    link: '#/list_article?list=help&id=1',
                    title: '支付帮助'
                },
                {
                    link: '#/list_article?list=help&id=1',
                    title: '配送说明'
                },
                {
                    link: '#/list_article?list=help&id=1',
                    title: '售后服务'
                },
            ],
            help: [
                {
                    link: '#/msg_article?msg=help&id=1',
                    title: '走时精准样子符合年轻人正品保障不错的5星',
                    date: '2018-5-18',
                    desc: '我国工具五金行业历经30多年发展，工具产品的制造在世界上占有突出地位，已成为全球工具产品的生产和销售大国。行业销售额超过1000亿元，出口超......'
                },
                {
                    link: '#/msg_article?msg=help&id=2',
                    title: '东熙不错很好，师傅人也不错售后很好',
                    date: '2018-5-18',
                    desc: '五金工具是劳动稠密型财产，作为五金之乡的永康，更是凭仗低本钱的保守合作劣势，一度成为五金工具的集聚之地。永康五金市场曾经构成五金产物、电动工......'
                },
                {
                    link: '#/msg_article?msg=help&id=3',
                    title: '的确是真4K，可以安装第三方软件，客服服务态度也很好',
                    date: '2018-5-18',
                    desc: '的确是真4K，可以安装第三方软件，客服服务态度也很好，冠捷代工的，质量应该没问题。由于一些测试软件对屏幕的测试结果不很准确，显示是2K的，提......'
                },
                {
                    link: '#/msg_article?msg=help&id=4',
                    title: '欧蒂薇莱初榨橄榄油500ML原瓶原装进口',
                    date: '2018-5-18',
                    desc: '建立现代市场营销体系，需要做到以下几个延伸：一是向国内一流交易会，一流五金城延伸，使之产品成为一个全方位的展示、交流、合作交易的平台。二是向......'
                },
                {
                    link: '#/msg_article?msg=help&id=5',
                    title: '首次在国美在线购物，昨天凌晨抡购了这台电',
                    date: '2018-5-18',
                    desc: '首次在国美在线购物，昨天凌晨抡购了这台电旅煲，看訂货单，东西还在天津庫，心里有点不想要了，与客服联系态度相当的，我决定不退了，没有想到今天早......'
                },
            ]
        }
	},
    methods: {
        prev (){
            if (this.pageNum > 1) {
                this.pageNum --;
            }
        },  
        next (){
            if (this.pageNum < 3) {
                this.pageNum ++;
            }
        }
    }
  }
</script>
<style>
    .paTitle{
        width:100%; height:.44rem; background:#f4f4f4; text-align:center; font-size:.16rem; display:block; line-height:.44rem; margin:0 0 .15rem;
    }
    .help{
        overflow:hidden;
    }
    .help .tab{
        width:100%; margin:0 0 .15rem; overflow:hidden;
    }
    .help .tab li{
        width:.7rem; height:.27rem; line-height:.27rem; float:left; border:0.01rem solid #c81118; font-size:.13rem; border-radius:0.03rem; text-align:center; margin:0 .04rem 0; 
    }
    .help .tab li a{
        color:#c81118; 
    }
    .help .list{
        overflow:hidden; padding:0 .08rem;
    }
    .help .list li{
        width:100%; padding:0 0 .15rem; margin:0 0 .15rem; border-bottom:.01rem dotted #e2e2e2; overflow:hidden;
    }
    .help .list li a{
        display:block; margin:0 0 .05rem; color:#5a5a5a; font-size:.15rem; font-weight:bold;
    }
    .help .list li p{
        color:#929292; margin:0 0 .05rem;
    }
    .help .list li span{
        color:#5A5A5A;
    }
</style>
